<template>
  <div class="container">
    <div class="mainContent">
      <div class="topSection">
        <i class="iconfont iconfanhui1" @click="goBack"></i>
        <el-row class="topName">{{ projectName }}</el-row>
        <el-row class="topInfo">
          <div class="fl mr_20">
            缴纳单位：
            <span>{{ payUnit }}</span>
          </div>
          <div class="fl mr_20">
            缴纳银行：
            <span>{{ payBank }}</span>
          </div>
          <div class="fl">
            缴纳账号：
            <span>{{ payAccount }}</span>
          </div>
        </el-row>
      </div>
      <div class="centerSectionBox">
        <div class="centerSection">
          <el-row>
            <el-col :span="12" class="centerLeft">
              <div class="centerTitle">保证金余额</div>
              <div class="balanceTotal">{{ deposit.balance }}万元</div>
              <div class="btn">
                <el-button
                  type="primary"
                  round
                  v-show="
                    isShowUpdate &&
                    (userType != 'PROJECT_ADMINISTRATOR' ||
                      userType != 'LABOR_ADMINISTRATOR')
                  "
                  @click="supplyOperate()"
                  class="saveBtn"
                  >补缴</el-button
                >
                <el-button
                  type="primary"
                  round
                  v-show="
                    isShowUpdate &&
                    (userType != 'PROJECT_ADMINISTRATOR' ||
                      userType != 'LABOR_ADMINISTRATOR')
                  "
                  @click="expenditureOperate()"
                  class="saveBtn"
                  >动用</el-button
                >
                <el-button
                  type="primary"
                  round
                  v-show="
                    isShowUpdate &&
                    (userType != 'PROJECT_ADMINISTRATOR' ||
                      userType != 'LABOR_ADMINISTRATOR')
                  "
                  @click="payBackOperate()"
                  class="saveBtn"
                  >返还</el-button
                >
              </div>
            </el-col>
            <el-col :span="12" class="centerRight">
              <div class="centerRtTop">
                应缴保证金：
                <span>{{ deposit.shouldPay }}万元</span>
              </div>
              <div>
                实缴保证金：
                <span>{{ deposit.actPay }}万元</span>
              </div>
              <div class="imgs">
                <img
                  src="../../../static/img/deposit/depositBacked.png"
                  alt=""
                  v-show="state === 'RETURN'"
                />
                <img
                  src="../../../static/img/deposit/depositPaid.png"
                  alt=""
                  v-show="state === 'DEPOSIT'"
                />
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="bottomSection">
          <div class="bottomTitle">缴支流水</div>
          <!-- 表格 -->
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            v-loading="loading"
            style="border: 1px solid #dfe6ec"
          >
            <el-table-column
              align="center"
              prop="operationDate"
              label="时间"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="operationDesc"
              label="操作类型"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="accTotal"
              label="金额(元)"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              align="left"
              label="操作"
              width="250px"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-link
                  type="primary"
                  @click="detailEvent(scope.row.id, scope.row.operationType)"
                  >查看详情</el-link
                >
                <el-link
                  type="primary"
                  @click="updateEvent(scope.row.id, scope.row.operationType)"
                  v-show="
                    isShowUpdate &&
                    (userType != 'PROJECT_ADMINISTRATOR' ||
                      userType != 'LABOR_ADMINISTRATOR')
                  "
                  >修改</el-link
                >
                <el-link
                  type="primary"
                  @click="deleteEvent(scope.row.id)"
                  v-show="
                    scope.row.operationType !== 'PAID' &&
                    isShowDel &&
                    (userType != 'PROJECT_ADMINISTRATOR' ||
                      userType != 'LABOR_ADMINISTRATOR')
                  "
                  >删除</el-link
                >
                <span v-show="!isShowUpdate && !isShowDel && !isShowDetail"
                  >--</span
                >
              </template>
            </el-table-column>
            <div slot="empty" v-show="isShow">
              <emptyTable emptyText="暂无相关信息"></emptyTable>
            </div>
          </el-table>
          <Pagination
            ref="pagination"
            @getList="getTableList"
            :requestUrl="requestUrl"
            :filterField="filterField"
            :pageSize="pageSize"
            :pageSizes="pageSizes"
          ></Pagination>
        </div>
      </div>
    </div>
    <!-- 补缴添加、修改弹窗 -->
    <el-dialog
      :title="eventType === 'add' ? '添加补缴记录' : '修改补缴记录'"
      :visible.sync="supplyFormVisible"
      :close-on-click-modal="false"
      @close="closeFormDialog('supplyFormVisible', 'supplyForm')"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <el-form
        :model="supplyForm"
        :rules="supplyFormRule"
        ref="supplyForm"
        label-width="100px"
        class="form"
      >
        <el-form-item label="补缴日期" prop="date">
          <el-date-picker
            class="ratioWidth"
            value-format="yyyy-MM-dd"
            v-model="supplyForm.date"
            type="date"
            placeholder="请选择保证金补缴的日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="应补金额" prop="shouldPay">
          <span class="greenWord"
            >{{ supplyForm.shouldPay }}元（应缴总额 - 余额）</span
          >
        </el-form-item>
        <el-form-item label="实缴金额" prop="actPay">
          <el-input
            class="ratioWidth"
            v-model.trim="supplyForm.actPay"
            clearable
          ></el-input>
          <span class="unitMaLf">元</span>
        </el-form-item>
        <el-form-item label="业务办理人" prop="operator">
          <el-input
            class="ratioWidth"
            v-model.trim="supplyForm.operator"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="缴纳凭证" prop="file">
          <el-row>
            <el-col :span="8" class="uploadBox">
              <el-button round class="uploadBtn">上传</el-button>
              <div class="uploadInputBox">
                <uploadInputNew
                  :uploadForm="supplyForm.uploadForm"
                  :clickUpload="supplyForm.uploadInput"
                  @getUpLoadFileData="getUpLoadFileData"
                  @getSrcListData="getSrcListData"
                  @getOldSrcListData="getOldSrcListData"
                  :uploadUrl="uploadUrl"
                  :upLoadFile="supplyForm.uploadFile"
                ></uploadInputNew>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="uploadBtnState fl">
                请上传缴纳回执单照片，要求格式为JPG、PNG格式，图片大小不超过2M。
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <elementImage
          :upLoadFile="supplyForm.uploadFile"
          :srcList="supplyForm.srcList"
          :oldSrcList="supplyForm.oldSrcList"
          @changeSrcList="supplyFormchangeSrcList"
        ></elementImage>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click.native="closeFormDialog('supplyFormVisible', 'supplyForm')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveForm('supplyForm', 'supplyFormVisible')"
          class="save"
          :loading="isLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 动用添加、修改弹窗 -->
    <el-dialog
      :title="eventType === 'add' ? '添加动用记录' : '修改动用记录'"
      :visible.sync="expenditureFormVisible"
      :close-on-click-modal="false"
      @close="closeFormDialog('expenditureFormVisible', 'expenditureForm')"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
      width="640px"
    >
      <el-form
        :model="expenditureForm"
        :rules="expenditureFormRule"
        ref="expenditureForm"
        label-width="100px"
        class="form"
        style="padding-top: 8px"
      >
        <el-form-item label="动用日期：" prop="date">
          <el-date-picker
            class="mWidth"
            value-format="yyyy-MM-dd"
            v-model="expenditureForm.date"
            type="date"
            placeholder="请选择保证金动用的日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="可动用金额：" prop="canPay">
          <span class="greenWord fontColorTheme"
            >{{ expenditureForm.canPay }}元（余额）</span
          >
        </el-form-item>
        <el-form-item label="动用金额：" prop="actPay">
          <el-input
            class="mWidth"
            v-model.trim="expenditureForm.actPay"
            clearable
            placeholder="请填写动用金额"
          ></el-input>
          <span class="unitMaLf">元</span>
        </el-form-item>
        <el-form-item label="动用方式：" prop="payType">
          <el-radio-group v-model="expenditureForm.payType">
            <el-radio label="TRANSFER">转账</el-radio>
            <el-radio label="CASH">现金</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="收款账号："
          prop="accountType"
          v-if="expenditureForm.payType === 'TRANSFER'"
        >
          <el-radio-group v-model="expenditureForm.accountType" class="mWidth">
            <el-radio label="ACCOUNT">工资专户</el-radio>
            <el-radio label="OTHER">其他账号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="其他账号："
          prop="accountNum"
          v-if="
            expenditureForm.payType === 'TRANSFER' &&
            expenditureForm.accountType === 'OTHER'
          "
        >
          <el-input
            class="mWidth"
            v-model.trim="expenditureForm.accountNum"
            clearable
            placeholder="请填写其他账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务办理人：" prop="operator">
          <el-input
            class="mWidth"
            v-model.trim="expenditureForm.operator"
            clearable
            placeholder="请填写业务办理人"
          ></el-input>
        </el-form-item>
        <el-form-item label="动用原因：" prop="reason">
          <el-input
            class="mWidth"
            v-model.trim="expenditureForm.reason"
            clearable
            placeholder="请填写动用原因"
          ></el-input>
        </el-form-item>
        <el-form-item label="动用凭证：" prop="payProof">
          <el-row>
            <el-col :span="8" class="uploadBox">
              <el-button round class="uploadBtn">上传</el-button>
              <div class="uploadInputBox">
                <uploadInputNew
                  class="mWidth"
                  :uploadForm="expenditureForm.uploadForm"
                  :clickUpload="expenditureForm.uploadInput"
                  @getUpLoadFileData="getUpLoadFileData"
                  @getSrcListData="getSrcListData"
                  @getOldSrcListData="getOldSrcListData"
                  :uploadUrl="uploadUrl"
                  :upLoadFile="expenditureForm.uploadFile"
                ></uploadInputNew>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="uploadBtnState fl">
                请上传欠薪认定书、工资发放花名册签字照片，要求格式为JPG、PNG格式，图片大小不超过2M。
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <elementImage
          :upLoadFile="expenditureForm.uploadFile"
          :srcList="expenditureForm.srcList"
          :oldSrcList="expenditureForm.oldSrcList"
          @changeSrcList="expenditureFormchangeSrcList"
        ></elementImage>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click.native="
            closeFormDialog('expenditureFormVisible', 'expenditureForm')
          "
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveForm('expenditureForm', 'expenditureFormVisible')"
          class="save"
          :loading="isLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 返还添加、修改弹窗 -->
    <el-dialog
      :title="eventType === 'add' ? '添加返还记录' : '修改返还记录'"
      :visible.sync="payBackFormVisible"
      :close-on-click-modal="false"
      @close="closeFormDialog('payBackFormVisible', 'payBackForm')"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
    >
      <el-form
        :model="payBackForm"
        :rules="payBackFormRule"
        ref="payBackForm"
        label-width="100px"
        class="form"
      >
        <el-form-item label="返还日期" prop="date">
          <el-date-picker
            class="ratioWidth"
            value-format="yyyy-MM-dd"
            v-model="payBackForm.date"
            type="date"
            placeholder="请选择保证金返还的日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="可返还金额" prop="canPay">
          <span class="greenWord fontColorTheme"
            >{{ payBackForm.canPay }}元（余额）</span
          >
        </el-form-item>
        <el-form-item label="返还金额" prop="actPay">
          <el-input
            class="ratioWidth"
            v-model.trim="payBackForm.actPay"
            clearable
            placeholder="请填写返还本金"
          ></el-input>
          <span class="unitMaLf">元</span>
        </el-form-item>
        <el-form-item label="返还方式" prop="payType">
          <el-radio-group v-model="payBackForm.payType">
            <el-radio label="TRANSFER">转账</el-radio>
            <el-radio label="CASH">现金</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="收款账号"
          prop="accountType"
          v-if="payBackForm.payType === 'TRANSFER'"
        >
          <el-radio-group v-model="payBackForm.accountType" class="ratioWidth">
            <el-radio label="ACCOUNT">工资专户</el-radio>
            <el-radio label="OTHER">其他账号</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="其他账号"
          prop="accountNum"
          v-if="
            payBackForm.payType === 'TRANSFER' &&
            payBackForm.accountType === 'OTHER'
          "
        >
          <el-input
            class="ratioWidth"
            v-model.trim="payBackForm.accountNum"
            clearable
            placeholder="请填写其他账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="业务办理人" prop="operator">
          <el-input
            class="ratioWidth"
            v-model.trim="payBackForm.operator"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            class="ratioWidth"
            v-model.trim="payBackForm.reason"
            clearable
            placeholder="请填写返还原因"
          ></el-input>
        </el-form-item>
        <el-form-item label="返还凭证" prop="file">
          <el-row>
            <el-col :span="8" class="uploadBox">
              <el-button round class="uploadBtn">上传</el-button>
              <div class="uploadInputBox">
                <uploadInputNew
                  :uploadForm="payBackForm.uploadForm"
                  :clickUpload="payBackForm.uploadInput"
                  @getUpLoadFileData="getUpLoadFileData"
                  @getSrcListData="getSrcListData"
                  @getOldSrcListData="getOldSrcListData"
                  :uploadUrl="uploadUrl"
                  :upLoadFile="payBackForm.uploadFile"
                ></uploadInputNew>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="uploadBtnState fl">
                请上传《工资支付保障金支付（结算）申请表》已签章照片，要求格式为JPG、PNG格式，图片大小不超过2M。
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <elementImage
          :upLoadFile="payBackForm.uploadFile"
          :srcList="payBackForm.srcList"
          :oldSrcList="payBackForm.oldSrcList"
          @changeSrcList="payBackFormchangeSrcList"
        ></elementImage>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click.native="closeFormDialog('payBackFormVisible', 'payBackForm')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveForm('payBackForm', 'payBackFormVisible')"
          class="save"
          :loading="isLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 缴纳修改弹窗 -->
    <el-dialog
      title="修改缴纳记录"
      :visible.sync="payFormVisible"
      :close-on-click-modal="false"
      @close="closeFormDialog('payFormVisible', 'payForm')"
      custom-class="dialog-minwidth"
      :modal-append-to-body="false"
      width="640px"
    >
      <el-form
        :model="payForm"
        :rules="payFormRule"
        ref="payForm"
        label-width="130px"
        class="form"
      >
        <el-form-item label="项目名称" prop="projectName">
          <span>{{ projectName }}</span>
        </el-form-item>
        <el-form-item label="保证金缴纳方式">
          <span>资金存入</span>
        </el-form-item>
        <el-form-item label="缴纳单位" prop="companyType">
          <el-radio-group v-model="companyType" @change="getCompanyName">
            <el-radio :label="'0'">{{ companyJS }}（建设方）</el-radio>
            <el-radio :label="'5'">{{ companySG }}（施工方）</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="缴纳日期" prop="date">
          <el-date-picker
            class="ratioWidth"
            value-format="yyyy-MM-dd"
            v-model="payForm.date"
            type="date"
            placeholder="请选择保证金缴存的日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="缴纳银行" prop="payBank">
          <span>{{ payBank }}</span>
        </el-form-item>
        <el-form-item label="缴纳账号" prop="payAccount">
          <span>{{ payAccount }}</span>
        </el-form-item>
        <el-form-item label="应缴金额" prop="shouldPay">
          <span class="greenWord"
            >{{ payForm.shouldPay }}元（{{ projectTotal }}*{{
              scale
            }}%，最高限额{{ limit }}元）</span
          >
        </el-form-item>
        <el-form-item label="实缴金额" prop="actPay">
          <el-input
            class="ratioWidth"
            v-model.trim="payForm.actPay"
            clearable
            placeholder="请输入实缴金额"
          ></el-input>
          <span class="unitMaLf">元</span>
        </el-form-item>
        <el-form-item label="业务办理人" prop="operator">
          <el-input
            class="ratioWidth"
            v-model.trim="payForm.operator"
            clearable
            placeholder="请填写业务实际处理人员姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="缴纳原因" prop="reason">
          <el-input
            class="ratioWidth"
            type="textarea"
            rows="3"
            v-model.trim="payForm.reason"
            clearable
            placeholder="请填写缴纳备注信息"
          ></el-input>
        </el-form-item>
        <el-form-item label="缴纳凭证" prop="file">
          <el-row>
            <el-col :span="8" class="uploadBox">
              <el-button round class="uploadBtn">上传</el-button>
              <div class="uploadInputBox">
                <uploadInputNew
                  :uploadForm="payForm.uploadForm"
                  :clickUpload="payForm.uploadInput"
                  @getUpLoadFileData="getUpLoadFileData"
                  @getSrcListData="getSrcListData"
                  @getOldSrcListData="getOldSrcListData"
                  :uploadUrl="uploadUrl"
                  :upLoadFile="payForm.uploadFile"
                ></uploadInputNew>
              </div>
            </el-col>
            <el-col :span="16">
              <div class="uploadBtnState fl">
                请上传工资支付保障金支付（结算）申请表》已签章照片，要求格式为JPG、PNG格式，图片大小不超过2M。
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <elementImage
          :upLoadFile="payForm.uploadFile"
          :srcList="payForm.srcList"
          :oldSrcList="payForm.oldSrcList"
          @changeSrcList="payFormchangeSrcList"
        ></elementImage>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click.native="closeFormDialog('payFormVisible', 'payForm')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          class="save"
          @click.native="savePayForm('payForm', 'payFormVisible')"
          :loading="isLoading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 补缴详情弹窗 -->
    <el-dialog
      title="补缴记录详情"
      width="640px"
      :visible.sync="supplyInfoVisible"
      :close-on-click-modal="false"
      custom-class="dialog-minwidth"
      class="detailDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >补缴日期：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          supplyForm.date
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >应补金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ supplyForm.shouldPay }}元（应缴总额 - 余额）</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >实缴金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ supplyForm.actPay }}元</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >业务办理人：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          supplyForm.operator || '--'
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >缴纳凭证：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">
          <!-- <div v-for="(item,index) of supplyForm.uploadFile" :key="index" >
            <el-image style="width: 100px; height: 100px" :src="item.absolutePath" :preview-src-list="supplyForm.srcList" @click="enlargeImg(index,'supplyForm')"></el-image>
          </div> -->
          <span v-if="supplyForm.uploadFile.length > 0">
            <span>已上传</span>
            <span class="seeFile" @click="toUploadFile()">查看</span>
            <contractEnclosureDialog
              v-if="uploadContract"
              dialogTitle="保证金缴纳凭证"
              :tableData="supplyForm.uploadFile"
              @closeDialog="hiddenDialog"
            ></contractEnclosureDialog>
          </span>
          <span v-else>未上传</span>
        </span>
      </el-row>
    </el-dialog>
    <!-- 动用详情弹窗 -->
    <el-dialog
      title="动用记录详情"
      width="640px"
      :visible.sync="expenditureInfoVisible"
      :close-on-click-modal="false"
      custom-class="dialog-minwidth"
      class="detailDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-row class="labelWidthSty" style="margin-top: 8px">
        <span class="gridcontent color333 fontsizef fontweight"
          >动用日期：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          expenditureForm.date
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >可动用金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ expenditureForm.canPay }}元（余额）</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >动用金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ expenditureForm.actPay }}元</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >动用方式：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          expenditureForm.typeName
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >收款账号：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ expenditureForm.accountTypeName
          }}{{ expenditureForm.accountNum }}</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >业务办理人：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          expenditureForm.operator || '--'
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >动用原因：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          expenditureForm.reason || '--'
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >动用凭证：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">
          <!-- <div v-for="(item,index) of expenditureForm.uploadFile" :key="index" >
            <el-image style="width: 100px; height: 100px" :src="item.url" :preview-src-list="expenditureForm.srcList" @click="enlargeImg(index,'expenditureForm')"></el-image>
          </div> -->
          <span v-if="expenditureForm.uploadFile.length > 0">
            <span>已上传</span>
            <span class="seeFile" @click="toUploadFileTwo()">查看</span>
            <contractEnclosureDialog
              v-if="uploadContractTwo"
              dialogTitle="保证金动用凭证"
              :tableData="expenditureForm.uploadFile"
              @closeDialog="hiddenDialogTwo"
            ></contractEnclosureDialog>
          </span>
          <span v-else>未上传</span>
        </span>
      </el-row>
    </el-dialog>
    <!-- 返还详情弹窗 -->
    <el-dialog
      title="返还记录详情"
      width="640px"
      :visible.sync="payBackInfoVisible"
      :close-on-click-modal="false"
      custom-class="dialog-minwidth"
      class="detailDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >返还日期：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payBackForm.date
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >可返金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ payBackForm.canPay }}元（余额）</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >返还金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ payBackForm.actPay }}元</span
        >
      </el-row>
      <!-- <el-row>    
        <span class="gridcontent color333 fontsizef fontweight">利息：</span> 
        <span class="gridcontent empcontentsty color666 fontsizef">{{payBackForm.interest}}元</span>   
      </el-row> -->
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >返还方式：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payBackForm.typeName
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >收款账号：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ payBackForm.accountTypeName }}&nbsp;&nbsp;{{
            payBackForm.accountNum
          }}</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >业务办理人：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payBackForm.operator || '--'
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight">备注：</span>
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payBackForm.reason || '--'
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >返还凭证：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">
          <!-- <div v-for="(item,index) of payBackForm.uploadFile" :key="index" >
            <el-image style="width: 100px; height: 100px" :src="item.url" :preview-src-list="payBackForm.srcList" @click="enlargeImg(index,'payBackForm')"></el-image>
          </div> -->
          <span v-if="payBackForm.uploadFile.length > 0">
            <span>已上传</span>
            <span class="seeFile" @click="toUploadFileThree()">查看</span>
            <contractEnclosureDialog
              v-if="uploadContractThree"
              dialogTitle="保证金返还凭证"
              :tableData="payBackForm.uploadFile"
              @closeDialog="hiddenDialogThree"
            ></contractEnclosureDialog>
          </span>
          <span v-else>未上传</span>
        </span>
      </el-row>
    </el-dialog>
    <!-- 缴纳详情弹窗 -->
    <el-dialog
      title="缴纳记录详情"
      width="640px"
      :visible.sync="payInfoVisible"
      :close-on-click-modal="false"
      custom-class="dialog-minwidth"
      class="detailDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >项目名称：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          projectName
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >保证金缴纳方式：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >资金存入</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >缴纳单位：</span
        >
        <span
          class="gridcontent empcontentsty color666 fontsizef"
          v-if="companyType === '0'"
          >{{ payForm.payCompany }}&nbsp;&nbsp;（建设方）</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef" v-else
          >{{ payForm.payCompany }}&nbsp;&nbsp;（施工方）</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >缴纳日期：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payForm.date
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >缴纳银行：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payBank
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >缴纳账号：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payAccount
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >应缴金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ payForm.shouldPay }}元（{{ projectTotal }}*{{
            scale
          }}%，最高限额{{ limit }}元）</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >实缴金额：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef"
          >{{ payForm.actPay }}元</span
        >
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >业务办理人：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payForm.operator || '--'
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >缴纳原因：</span
        >
        <span class="gridcontent empcontentsty color666 fontsizef">{{
          payForm.reason || '--'
        }}</span>
      </el-row>
      <el-row class="labelWidthSty">
        <span class="gridcontent color333 fontsizef fontweight"
          >缴纳凭证：</span
        >
        <span
          class="gridcontent empcontentsty color666 fontsizef"
          v-show="payForm.uploadFile.length > 0"
        >
          <div v-for="(item, index) of payForm.uploadFile" :key="index">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.url"
              :preview-src-list="payForm.srcList"
              @click="enlargeImg(index, 'payForm')"
            ></el-image>
          </div>
        </span>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import uploadInputNew from '@/components/publicCom/uploadInputNew.vue'

export default {
  name: 'securityDetail',
  components: {
    uploadInputNew,
  },
  data() {
    var checkMoney = (rule, value, callback) => {
      value = value.toString().replace(/\s+/g, '')
      if (value === '') {
        return callback(new Error('金额不能为空'))
      } else {
        var rePayTotal =
          /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
        if (!rePayTotal.test(value) || value == 0.0 || value == 0.0) {
          callback(new Error('金额格式不正确,必须大于0,最多带有2位小数'))
        } else {
          if (value >= 100000000000) {
            callback(new Error('金额需小于1000亿'))
          } else {
            callback()
          }
        }
      }
    }
    return {
      id: '', //保证金id
      projectName: '', //项目名称
      payUnit: '', //缴纳单位
      payUnitUscc: '', //缴纳单位Id
      companyJS: '', //建设方
      companySG: '', //施工方
      companyJSUscc: '', //建设方Id
      companySGUscc: '', //施工方Id
      companyType: '', //缴纳单位类型 0建设方 5施工方
      payBank: '', //缴纳银行
      payAccount: '', //缴纳账号 （工资专户账号）
      shouldSupply: 0, //应补缴金额
      deposit: {
        balance: 0, //余额
        actPay: 0, //实缴保证金,
      },
      // 状态（ DEPOSIT -已缴存，RETURN -已退回，DATESTART -已生效，DATEEND -已失效
      state: '', //保证金缴纳状态
      scale: '', //应缴金额比例
      limit: '', //最高限额
      projectTotal: '', //{{projectTotal}}
      requestUrl: 'api-d/accass/expand/accasslist', //表格请求路径
      filterField: {
        projectId: '',
      },
      pageSizes: [5],
      currentPage: 1,
      pageSize: 5,
      tableData: [],
      loading: true,
      isShow: false,
      supplyForm: {
        //补缴表单
        date: '', //补缴日期
        shouldPay: '',
        actPay: '', //实缴金额,
        operator: '', //业务办理人
        uploadForm: 'supplyUploadForm',
        srcList: [], //上传图片
        oldSrcList: [], //上传图片预览图片数组
        uploadInput: 'supplyUploadInput',
        uploadFile: [],
      },
      salaryExcelForm: 'salaryExcelForm',
      supplyFormVisible: false,
      supplyFormRule: {
        //补缴表单验证
        date: [
          {
            required: true,
            message: '请选择保证金补缴的日期',
            trigger: 'blur',
          },
        ],
        actPay: [{ required: true, validator: checkMoney, trigger: 'blur' }],
      },
      payImageUrl: '', //补缴表单上传图片
      payImageDialog: false,
      isLoading: false, //确定按钮loading
      supplyInfoVisible: false, //补缴详情
      expenditureInfoVisible: false, //动用详情
      payBackInfoVisible: false, //返回详情
      payInfoVisible: false, //缴纳详情
      canPay: '', //可动用，可返还
      expenditureForm: {
        //动用表单
        date: '', //日期
        canPay: '', //可动用
        actPay: '', //动用
        payType: 'TRANSFER',
        typeName: '',
        accountType: '', //收款账号(ACCOUNT:工资专户；OTHER:其他)
        accountNum: '', //账号
        accountTypeName: '',
        operator: '',
        reason: '',
        uploadForm: 'expenditureUploadForm',
        srcList: [], //上传图片
        oldSrcList: [], //上传图片预览图片数组
        uploadInput: 'expenditureUploadInput',
        uploadFile: [],
      },
      expenditureFormVisible: false,
      expenditureFormRule: {
        //动用表单验证
        date: [
          {
            required: true,
            message: '请选择保证金动用的日期',
            trigger: 'blur',
          },
        ],
        actPay: [{ required: true, validator: checkMoney, trigger: 'blur' }],
        accountType: [
          { required: true, message: '请选择收款账号', trigger: 'blur' },
        ],
        accountNum: [
          {
            required: true,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
        payType: [
          { required: true, message: '请选择返还类型', trigger: 'blur' },
        ],
        reason: [
          {
            min: 1,
            max: 200,
            required: true,
            message: '请填写动用原因',
            trigger: 'blur',
          },
        ],
      },
      payBackForm: {
        //返还表单
        date: '',
        canPay: '', //可返还
        actPay: '',
        //interest:'',
        payType: 'TRANSFER',
        typeName: '',
        accountType: '',
        accountName: '',
        accountNum: '',
        operator: '',
        reason: '',
        uploadForm: 'payBackUploadForm',
        srcList: [], //上传图片
        oldSrcList: [], //上传图片预览图片数组
        uploadInput: 'payBackUploadInput',
        uploadFile: [],
      },
      payBackFormVisible: false,
      payBackFormRule: {
        //返还表单验证
        date: [
          {
            required: true,
            message: '请选择保证金返还的日期',
            trigger: 'blur',
          },
        ],
        actPay: [{ required: true, validator: checkMoney, trigger: 'blur' }],
        accountNum: [
          {
            required: true,
            pattern: /^[^\u4e00-\u9fa5]{0,}$/,
            message: '请输入正确格式的账号',
            trigger: 'blur',
          },
        ],
        payType: [
          { required: true, message: '请选择返还类型', trigger: 'blur' },
        ],
        accountType: [
          { required: true, message: '请选择收款账号', trigger: 'blur' },
        ],
      },
      payForm: {
        //缴纳表单
        companyUscc: '', //缴纳单位Id
        payCompany: '', //缴纳单位名称
        date: '',
        shouldPay: '', //应缴金额
        actPay: '',
        operator: '',
        reason: '',
        uploadForm: 'payUploadForm',
        srcList: [], //上传图片
        oldSrcList: [], //上传图片预览图片数组
        uploadInput: 'payUploadInput',
        uploadFile: [],
      },
      payFormVisible: false,
      payFormRule: {
        //缴纳表单验证
        date: [
          {
            required: true,
            message: '请选择保证金缴存的日期',
            trigger: 'blur',
          },
        ],
        actPay: [{ required: true, validator: checkMoney, trigger: 'blur' }],
      },
      //上传图片的变量
      uploadUrl: 'api-f/files/upload', //上传图片路径
      updateId: '', //修改流水的id
      eventType: 'add',
      //日期选择范围限制
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      isShowUpdate: '',
      isShowDel: '',
      userType: '',
      uploadContract: false,
      uploadContractTwo: false,
      uploadContractThree: false,
    }
  },
  created() {
    //获取保证金列表跳转过来的保证金id
    this.id = this.$route.query.id
    //获取项目Id
    this.filterField.projectId = this.$route.query.projectId
    this.userType = this.$route.query.userType
    //加载保证金详情
    this.loadDetail()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('depositList:update') > -1
    this.isShowDel =
      this.$store.state.buttonLimitsArr.indexOf('depositList:delete') > -1
  },
  methods: {
    //加载保证金详情
    loadDetail() {
      this.axios({
        method: 'post',
        url: 'api-d/deposit/expand/detail',
        data: {
          id: this.id,
        },
      })
        .then(
          (res) => {
            this.loadDetailInfo(res)
          },
          (res) => {
            this.$message({
              message: '加载详情失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    //详情赋值
    loadDetailInfo(res) {
      const result = res.data.result
      this.projectName = result.projectName
      this.payBank = result.bankName //银行
      this.payAccount = result.account //账号
      this.deposit.shouldPay = result.shouldPayTotal //应缴金额
      this.deposit.balance = result.balance //余额
      this.deposit.actPay = result.payTotal //实缴
      this.state = result.status //项目状态
      this.companyJSUscc = result.ownerUscc
      this.companySGUscc = result.contractorUscc
      this.companyJS = result.ownerName
      this.companySG = result.contractorName
      this.scale = result.payScale //缴存比例
      this.limit = result.upperLimit //限额
      this.projectTotal = result.projectTotal //造价
      this.shouldSupply = result.appendPay //应补缴金额
      this.companyType = result.companyType
      if (this.companyType === '0') {
        //建设方
        this.payUnit = result.ownerName //缴纳单位名称
        this.payUnitUscc = result.contractorUscc //缴纳单位的uscc
      }
      if (this.companyType === '5') {
        //施工方
        this.payUnit = result.contractorName //缴纳单位名称
        this.payUnitUscc = result.ownerUscc //缴纳单位的uscc
      }
      this.canPay = result.realBalance //可动用
    },
    //加载列表
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //补缴添加
    supplyOperate() {
      //当保证金已返还，三个按钮均不可点击
      //当保证金余额<应缴，可点击补缴
      if (this.state === 'RETURN') {
        this.$message.error('当前保证金状态为已返还，无法添加流水')
      } else if (this.shouldSupply <= 0) {
        //appendPay
        this.$message.error('当前保证金已足额缴纳，无需补缴')
      } else {
        this.eventType = 'add'
        //重置上传组件数据
        this.resetForm('supplyForm')
        this.supplyForm.srcList = []
        this.supplyForm.oldSrcList = []
        this.supplyForm.uploadFile = []
        // this.$nextTick(function() {
        //   this.$refs.supplyForm.resetFields();
        // });
        this.supplyFormVisible = true
        this.supplyForm.shouldPay = this.shouldSupply
      }
    },
    //动用添加
    expenditureOperate() {
      if (this.state === 'RETURN') {
        this.$message.error('当前保证金状态为已返还，无法添加流水')
      } else if (this.canPay == 0) {
        //余额
        this.$message.error('当前保证金余额为0，无法动用')
      } else {
        this.eventType = 'add'
        this.resetForm('expenditureForm')
        //重置上传组件数据
        this.expenditureForm.srcList = []
        this.expenditureForm.oldSrcList = []
        this.expenditureForm.uploadFile = []
        this.expenditureFormVisible = true
        this.expenditureForm.canPay = this.canPay //可动用
      }
    },
    //返还添加
    payBackOperate() {
      if (this.state === 'RETURN') {
        this.$message.error('当前保证金状态为已返还，无法添加流水')
      } else if (this.canPay == 0) {
        //余额
        this.$message.error('当前保证金余额为0，无法返还')
      } else {
        this.eventType = 'add'
        //重置上传组件数据
        this.payBackForm.srcList = []
        this.payBackForm.oldSrcList = []
        this.payBackForm.uploadFile = []
        this.resetForm('payBackForm')
        this.payBackFormVisible = true
        this.payBackForm.canPay = this.canPay //可返还
      }
    },
    //查看详情（返回+补缴+动用+缴纳）
    detailEvent(id, type) {
      this.axios({
        method: 'post',
        url: 'api-d/accass/expand/accassdetail',
        data: {
          id: id,
        },
      })
        .then(
          (res) => {
            const result = res.data.result
            if (type === 'APPENDED') {
              this.supplyInfoVisible = true
              this.loadSupplyDetail(result)
            }
            if (type === 'EXPENDED') {
              this.expenditureInfoVisible = true
              this.loadExpenditureDetail(result)
            }
            if (type === 'RETURNED') {
              this.payBackInfoVisible = true
              this.loadPayBackDetail(result)
            }
            if (type === 'PAID') {
              this.payInfoVisible = true
              this.loadPayDetail(result)
            }
          },
          (res) => {
            this.$message({
              message: '加载详情失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    // enlargeImg(index,formName) {
    //     if(formName === 'supplyForm'){
    //       this.supplyForm.srcList = this.supplyForm.oldSrcList;
    //       var demo = this.supplyForm.srcList;
    //       var frontArr = demo.slice(0, index);
    //       var behindArr = demo.slice(index, demo.length);
    //       var list = behindArr.concat(frontArr);
    //       this.supplyForm.srcList = list;
    //     };
    //     if(formName === 'expenditureForm'){
    //       this.expenditureForm.srcList = this.expenditureForm.oldSrcList;
    //       var demo = this.expenditureForm.srcList;
    //       var frontArr = demo.slice(0, index);
    //       var behindArr = demo.slice(index, demo.length);
    //       var list = behindArr.concat(frontArr);
    //       this.expenditureForm.srcList = list;
    //     };
    //     if(formName === 'payBackForm'){
    //       this.payBackForm.srcList = this.payBackForm.oldSrcList;
    //       var demo = this.payBackForm.srcList;
    //       var frontArr = demo.slice(0, index);
    //       var behindArr = demo.slice(index, demo.length);
    //       var list = behindArr.concat(frontArr);
    //       this.payBackForm.srcList = list;
    //     };
    //     if(formName === 'payForm'){
    //       this.payForm.srcList = this.payForm.oldSrcList;
    //       var demo = this.payForm.srcList;
    //       var frontArr = demo.slice(0, index);
    //       var behindArr = demo.slice(index, demo.length);
    //       var list = behindArr.concat(frontArr);
    //       this.payForm.srcList = list;
    //     };
    //   },
    //补缴详情
    loadSupplyDetail(result) {
      this.supplyForm.date = result.operationDate
      this.supplyForm.shouldPay = result.lastTotal
      this.supplyForm.actPay = result.total
      this.supplyForm.operator = result.operator
      this.supplyForm.uploadFile = result.file
      for (var i = 0; i < this.supplyForm.uploadFile.length; i++) {
        this.supplyForm.srcList.push(this.supplyForm.uploadFile[i].url)
        this.supplyForm.oldSrcList.push(this.supplyForm.uploadFile[i].url)
      }
    },
    //动用详情
    loadExpenditureDetail(result) {
      this.expenditureForm.date = result.operationDate
      //this.shouldSupply = result.lastTotal;
      this.expenditureForm.canPay = result.lastTotal
      this.expenditureForm.actPay = result.total
      this.expenditureForm.payType = result.method
      this.expenditureForm.typeName = result.methodDesc
      this.expenditureForm.accountType = result.transferInType
      this.expenditureForm.accountTypeName = result.transferDesc
      this.expenditureForm.accountNum = result.transferInAcc
      this.expenditureForm.operator = result.operator
      this.expenditureForm.reason = result.reason
      this.expenditureForm.uploadFile = result.file
      for (var i = 0; i < this.expenditureForm.uploadFile.length; i++) {
        this.expenditureForm.srcList.push(
          this.expenditureForm.uploadFile[i].url
        )
        this.expenditureForm.oldSrcList.push(
          this.expenditureForm.uploadFile[i].url
        )
      }
    },
    //返还详情
    loadPayBackDetail(result) {
      this.payBackForm.date = result.operationDate
      //this.shouldSupply = result.lastTotal;
      this.payBackForm.canPay = result.lastTotal
      this.payBackForm.actPay = result.total
      this.payBackForm.payType = result.method
      this.payBackForm.typeName = result.methodDesc
      this.payBackForm.accountType = result.transferInType
      this.payBackForm.accountTypeName = result.transferDesc
      this.payBackForm.accountNum = result.transferInAcc
      this.payBackForm.operator = result.operator
      this.payBackForm.reason = result.reason
      this.payBackForm.uploadFile = result.file
      for (var i = 0; i < this.payBackForm.uploadFile.length; i++) {
        this.payBackForm.srcList.push(this.payBackForm.uploadFile[i].url)
        this.payBackForm.oldSrcList.push(this.payBackForm.uploadFile[i].url)
      }
    },
    //缴纳详情
    loadPayDetail(result) {
      this.payForm.payCompany = this.payUnit
      this.payForm.companyUscc = this.payUnitUscc
      this.payForm.date = result.operationDate
      this.payForm.shouldPay = result.shouldPayTotal
      this.payForm.actPay = result.total
      this.payForm.operator = result.operator
      this.payForm.reason = result.reason
      this.payForm.uploadFile = result.file
      for (var i = 0; i < this.payForm.uploadFile.length; i++) {
        this.payForm.srcList.push(this.payForm.uploadFile[i].url)
        this.payForm.oldSrcList.push(this.payForm.uploadFile[i].url)
      }
    },
    //修改（返回+补缴+动用+缴纳）
    updateEvent(id, type) {
      this.eventType = 'update'
      this.updateId = id
      this.axios({
        method: 'post',
        url: 'api-d/accass/expand/accassdetail',
        data: {
          id: id,
        },
      })
        .then(
          (res) => {
            const result = res.data.result
            if (type === 'APPENDED') {
              this.supplyFormVisible = true
              // this.$nextTick(function() {
              //   this.$refs.supplyForm.resetFields();
              // });
              this.loadSupplyDetail(result)
            }
            if (type === 'EXPENDED') {
              this.expenditureFormVisible = true
              // this.$nextTick(function() {
              //   this.$refs.expenditureForm.resetFields();
              // });
              this.loadExpenditureDetail(result)
            }
            if (type === 'RETURNED') {
              this.payBackFormVisible = true
              // this.$nextTick(function() {
              //   this.$refs.payBackForm.resetFields();
              // });
              this.loadPayBackDetail(result)
            }
            if (type === 'PAID') {
              this.payFormVisible = true
              // this.$nextTick(function() {
              //   this.$refs.payForm.resetFields();
              // });
              this.loadPayDetail(result)
            }
          },
          (res) => {
            this.$message({
              message: '加载详情失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})

      //this.detailEvent(id,type);
    },
    //删除（返还+补缴+动用）
    deleteEvent(id) {
      this.$confirm('是否确认该条记录?', '删除记录', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.deleteRow(id)
        })
        .catch(() => {})
    },
    deleteRow(id) {
      this.axios({
        method: 'post',
        url: 'api-d/accass/expand/delaccass',
        data: {
          id: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData()
              this.loadDetail() //重新加载详情
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //关闭弹窗
    closeFormDialog(dialogVisible, formName) {
      if (formName === 'supplyForm') {
        this.emptySupplyFormInfo()
      }
      if (formName === 'expenditureForm') {
        this.emptyExpenditureFormInfo()
      }
      if (formName === 'payBackForm') {
        this.emptyPayBackFormInfo()
      }
      if (formName === 'payForm') {
        this.emptyPayFormInfo()
      }
    },
    emptySupplyFormInfo() {
      this.supplyFormVisible = false
      //情况上传组件的数据
      this.supplyForm.srcList = []
      this.supplyForm.oldSrcList = []
      this.supplyForm.uploadFile = []
      this.$nextTick(function () {
        this.$refs.supplyForm.resetFields()
      })
    },
    emptyExpenditureFormInfo() {
      this.expenditureFormVisible = false
      this.expenditureForm.srcList = []
      this.expenditureForm.oldSrcList = []
      this.expenditureForm.uploadFile = []
      this.$nextTick(function () {
        this.$refs.expenditureForm.resetFields()
      })
    },
    emptyPayBackFormInfo() {
      this.payBackFormVisible = false
      this.payBackForm.srcList = []
      this.payBackForm.oldSrcList = []
      this.payBackForm.uploadFile = []
      this.$nextTick(function () {
        this.$refs.payBackForm.resetFields()
      })
    },
    emptyPayFormInfo() {
      this.payFormVisible = false
      this.payForm.srcList = []
      this.payForm.oldSrcList = []
      this.payForm.uploadFile = []
      this.$nextTick(function () {
        this.$refs.payForm.resetFields()
      })
    },
    //表单提交验证
    saveForm(formName, formVisible) {
      //确定按钮禁止点击
      this.isLoading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var data = ''
          var url = ''
          if (this.eventType === 'add') {
            url = 'api-d/accass/expand/add'
          } else {
            url = 'api-d/accass/expand/updateaccass'
          }
          if (formName === 'supplyForm') {
            //补缴表单
            data = {
              projectId: this.filterField.projectId,
              id: this.updateId,
              operationType: 'APPENDED',
              operationDate: this.supplyForm.date,
              lastTotal: this.shouldSupply,
              total: this.supplyForm.actPay,
              operator: this.supplyForm.operator,
              fileList: JSON.stringify(this.supplyForm.uploadFile),
            }
          }
          if (formName === 'expenditureForm') {
            //动用表单
            data = {
              projectId: this.filterField.projectId,
              id: this.updateId,
              operationType: 'EXPENDED',
              operationDate: this.expenditureForm.date,
              method: this.expenditureForm.payType,
              lastTotal: this.expenditureForm.canPay, //可动用金额
              total: this.expenditureForm.actPay,
              transferInType: this.expenditureForm.accountType,
              transferInAcc: this.expenditureForm.accountNum,
              operator: this.expenditureForm.operator,
              reason: this.expenditureForm.reason,
              fileList: JSON.stringify(this.expenditureForm.uploadFile),
            }
          }
          if (formName === 'payBackForm') {
            //返还表单
            data = {
              projectId: this.filterField.projectId,
              id: this.updateId,
              operationType: 'RETURNED',
              operationDate: this.payBackForm.date,
              lastTotal: this.payBackForm.canPay, //可返还金额
              total: this.payBackForm.actPay,
              method: this.payBackForm.payType,
              transferInType: this.payBackForm.accountType,
              transferInAcc: this.payBackForm.accountNum,
              operator: this.payBackForm.operator,
              reason: this.payBackForm.reason,
              fileList: JSON.stringify(this.payBackForm.uploadFile),
            }
          }
          this.toSave(formName, formVisible, data, url)
        } else {
          this.isLoading = false
          return false
        }
      })
    },
    //表单保存
    //动用添加、修改保存事件
    //返还添加、修改保存事件
    //缴纳修改事件 //表单名、表单数据、表单是否可见
    toSave(formName, formVisible, data, url) {
      this.axios({
        method: 'post',
        url: url,
        data: data,
      })
        .then(
          (response) => {
            this.isLoading = false
            if (!response.data.hasError) {
              this.$message({
                message: '保存成功',
                type: 'success',
              })
              this.$refs.pagination.getTableListData()
              this.loadDetail() //重新加载详情
              this.closeFormDialog(formVisible, formName)
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.isLoading = false
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {
          this.isLoading = false
        })
    },
    // 获取子组件上传成功后的值
    getUpLoadFileData(data, formName) {
      if (formName === 'supplyUploadForm') {
        this.supplyForm.uploadFile.push(data)
      }
      if (formName === 'expenditureUploadForm') {
        this.expenditureForm.uploadFile.push(data)
      }
      if (formName === 'payBackUploadForm') {
        this.payBackForm.uploadFile.push(data)
      }
      if (formName === 'payUploadForm') {
        this.payForm.uploadFile.push(data)
      }
    },
    getSrcListData(data, formName) {
      if (formName === 'supplyUploadForm') {
        this.supplyForm.srcList.push(data.url)
      }
      if (formName === 'expenditureUploadForm') {
        this.expenditureForm.srcList.push(data.url)
      }
      if (formName === 'payBackUploadForm') {
        this.payBackForm.srcList.push(data.url)
      }
      if (formName === 'payUploadForm') {
        this.payForm.srcList.push(data.url)
      }
    },
    getOldSrcListData(data, formName) {
      if (formName === 'supplyUploadForm') {
        this.supplyForm.oldSrcList.push(data.url)
      }
      if (formName === 'expenditureUploadForm') {
        this.expenditureForm.oldSrcList.push(data.url)
      }
      if (formName === 'payBackUploadForm') {
        this.payBackForm.oldSrcList.push(data.url)
      }
      if (formName === 'payUploadForm') {
        this.payForm.oldSrcList.push(data.url)
      }
    },
    delFile(index, formName) {
      if (formName === 'supplyForm') {
        this.supplyForm.uploadFile.splice(index, 1)
      }
      if (formName === 'expenditureForm') {
        this.expenditureForm.uploadFile.splice(index, 1)
      }
      if (formName === 'payBackForm') {
        this.payBackForm.uploadFile.splice(index, 1)
      }
      if (formName === 'payForm') {
        this.payForm.uploadFile.splice(index, 1)
      }
      this.loadDetail()
    },
    /**
     * @description: 改变图片地址
     */
    supplyFormchangeSrcList(val) {
      this.supplyForm.srcList = val
    },
    /**
     * @description: 改变图片地址
     */
    expenditureFormchangeSrcList(val) {
      this.expenditureForm.srcList = val
    },
    /**
     * @description: 改变图片地址
     */
    payBackFormchangeSrcList(val) {
      this.payBackForm.srcList = val
    },
    /**
     * @description: 改变图片地址
     */
    payFormchangeSrcList(val) {
      this.payForm.srcList = val
    },
    savePayForm(id, formVisible) {
      //修改缴纳
      //确定按钮禁止点击
      this.isLoading = true
      this.$refs['payForm'].validate((valid) => {
        if (valid) {
          let data = {
            projectId: this.filterField.projectId,
            id: this.updateId,
            uscc: this.payForm.companyUscc,
            companyName: this.payForm.payCompany,
            companyType: this.companyType,
            operationDate: this.payForm.date,
            total: this.payForm.actPay,
            operator: this.payForm.operator,
            reason: this.payForm.reason,
            fileList: JSON.stringify(this.payForm.uploadFile),
          }
          this.axios({
            method: 'post',
            url: 'api-d/accass/expand/updateaccass',
            data: data,
          })
            .then(
              (response) => {
                this.isLoading = false
                if (!response.data.hasError) {
                  this.$message({
                    message: '保存成功',
                    type: 'success',
                  })
                  this.payFormVisible = false //关闭弹窗
                  this.$refs.pagination.getTableListData()
                  this.loadDetail() //重新加载详情
                } else {
                  this.$message({
                    message: response.data.errorMsg,
                    type: 'error',
                  })
                }
              },
              (response) => {
                this.isLoading = false
                this.$message({
                  message: '数据请求失败',
                  type: 'error',
                })
              }
            )
            .catch((error) => {
              this.isLoading = false
            })
        } else {
          this.isLoading = false
          return false
        }
      })
    },
    getCompanyName(val) {
      if (val === '0') {
        this.payForm.payCompany = this.companyJS
        this.payForm.companyUscc = this.companyJSUscc
      } else {
        this.payForm.payCompany = this.companySG
        this.payForm.companyUscc = this.companySGUscc
      }
    },
    goBack() {
      this.$router.push({
        name: 'cashDepositList',
        path: '/home/cashDeposit/cashDepositList',
        query: {
          path: 'cashDepositList',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    },
    toUploadFile() {
      this.uploadContract = true
    },
    hiddenDialog() {
      this.uploadContract = false
    },
    toUploadFileTwo() {
      this.uploadContractTwo = true
    },
    hiddenDialogTwo() {
      this.uploadContractTwo = false
    },
    toUploadFileThree() {
      this.uploadContractThree = true
    },
    hiddenDialogThree() {
      this.uploadContractThree = false
    },
  },
}
</script>

<style scoped lang="less">
.centerSectionBox {
  position: absolute;
  padding: 24px;
  width: 100%;
  top: 96px;
  bottom: 0;
  overflow-y: auto;
}
.container {
  position: absolute;
  top: 130px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  background: #fff;
  overflow: hidden;
  .mr_20 {
    margin-right: 20px;
  }
  .greenWord {
    color: #009588;
    font-weight: bold;
  }
  /deep/.el-radio {
    line-height: 35px;
  }
  .mainContent {
    background: #fff;
    .topSection {
      height: 96px;
      padding: 24px 24px 24px 48px;
      background: #e4ebf1;
      color: #333;
      .iconfanhui1 {
        position: absolute;
        cursor: pointer;
        left: 24px;
        top: 26px;
      }
      .topName {
        font: bold 18px Microsoft YaHei;
        line-height: 18px;
        margin-bottom: 16px;
      }
      .topInfo {
        font-size: 14px;
        line-height: 14px;
      }
    }
    .centerSection {
      width: 830px;
      height: 167px;
      background: #f5f7fb;
      border: 1px solid #dee5f4;
      padding: 24px;
      position: relative;
      .centerLeft {
        border-right: 1px solid #d5dee7;
        .centerTitle {
          font: bold 18px Microsoft YaHei;
          line-height: 18px;
          color: #333;
        }
        .balanceTotal {
          margin: 22px 0;
          line-height: 24px;
          color: #009588;
          font-size: 24px;
        }
        .btn {
          .el-button {
            width: 80px;
            height: 32px;
            background: #009588;
            color: #fff;
            padding: 0;
            border: none;
          }
        }
      }
      .centerRight {
        color: #333;
        font-size: 16px;
        line-height: 16px;
        padding: 30px 24px;
        .centerRtTop {
          margin-bottom: 24px;
        }
        .imgs {
          position: absolute;
          top: -40px;
          left: 655px;
          width: 345px;
          img {
            width: 168px;
            height: 123px;
          }
        }
      }
    }
    .bottomSection {
      margin-top: 48px;
      .bottomTitle {
        font: bold 18px Microsoft YaHei;
        line-height: 18px;
        color: #333;
        margin-bottom: 24px;
      }
    }
  }
  // 弹窗样式
  .el-dialog {
    .unitMaLf {
      margin-left: 5px;
    }
    .uploadRemark {
      margin-top: 10px;
      line-height: 18px;
    }
    //  附件样式
    .uploadBox {
      position: relative;
      width: 96px;
      .uploadBtn {
        width: 96px;
        height: 36px;
        color: #009588;
        border: 1px solid #009588;
        cursor: pointer;
        padding: 0px;
      }
      .uploadInputBox {
        position: absolute;
        width: 96px;
        height: 36px;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
        form {
          width: 96px;
          height: 36px;
          input {
            width: 96px;
            height: 36px;
          }
        }
      }
    }
    .uploadBtnState {
      font-size: 14px;
      color: #999999;
      margin-left: 12px;
      line-height: 20px;
    }
    .imgStyle {
      padding-left: 100px;
      li {
        position: relative;
        margin-right: 20px;
        i {
          position: absolute;
          right: -6px;
          top: -10px;
          font-size: 20px;
          cursor: pointer;
        }
      }
    }
  }
  .detailDialog {
    .gridContent {
      line-height: 16px !important;
    }
    .labelWidthSty {
      height: auto !important;
    }
    .el-row {
      height: 35px;
      line-height: 35px;
      margin-bottom: 10px;
    }
    .el-col-6 {
      text-align: right;
    }
    .el-col-18 {
      text-align: left;
      padding-left: 15px;
    }
    .imgStyle {
      div {
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
@media only screen and (max-width: 1280px) {
  .container .mainContent .centerSection .centerRight .imgs {
    left: 580px;
  }
  .container .mainContent .centerSection {
    width: 750px;
  }
}
.ratioWidth {
  width: 310px;
}
</style>
